<template>
	<view class="content" style="background: #fff;">
		<!-- 分段器 -->
		<view class="subsection-wrapper">
			<u-subsection :list="list" :current="current" mode="subsection" @change="sectionChange" bgColor='#fff'></u-subsection>
		</view>
		<!-- 标签 -->
		<view style="margin-top: 50px;">
			<u-tabs :list="list1" @click="click"  :activeStyle="{
			    color: '#303133', 
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :current='currenttab'></u-tabs>
		</view>
		<!-- 按钮 -->
		<view class="contentButton"
			v-if="InvestigationList.length>0&&queryParams.hiddenStatus==1&&storage_data!='create'">
			<view class="custom-style">
				<u-button type="success" :plain="true" text="保存" size="small" @click="handleUpdate"></u-button>
			</view>
			<view class="custom-style">
				<u-button type="primary" :plain="true" text="提交" size="small" @click="handleAdd"></u-button>
			</view>
			<!-- <view style="margin: 0 20rpx;">
				<u-icon name="reload" @click="getList" size="28"></u-icon>
			</view> -->
		</view>
		
		<!-- 列表 -->
		<u-list @scroll="onscroll" :scrollTop="scrollTop">
			<u-list-item :key="index" v-for="(item,index) in InvestigationList">
				<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange"> -->
				<uni-card :is-shadow="true" class="ulist">
					<view style="width: 100%;display:flex;">
						<view style="width: 68%;border-right: 1px dashed gray;margin-right: 5px;padding-right: 5px;">
							<u-row customStyle="margin-bottom: 10px;">
								<!-- <u-col span="4">
									<view class="demo-layout bg-purple-light">风险部位</view>
								</u-col> -->
								<u-col span="12">
									<view class="title">任务编号</view>
									<view class="demo-layout ">
										<u-read-more :toggle="true" showHeight="50" textIndent="0em" closeText="展开"
											:shadowStyle="shadowStyle">
											<rich-text :nodes="item.hiddenTaskCode"></rich-text>
										</u-read-more>
									</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px;">
								<!-- <u-col span="4">
									<view class="demo-layout bg-purple-light">位置</view>
								</u-col> -->
								<u-col span="12">
									<!-- <view class="demo-layout ">{{item.hiddenLocation}}</view> -->
									<view class="demo-layout ">
										<view class="title">位置</view>
										<u-read-more :toggle="true" showHeight="50" textIndent="0em" closeText="展开"
											:shadowStyle="shadowStyle">
											<rich-text :nodes="item.hiddenLocation"></rich-text>
										</u-read-more>
									</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px;">
								<!-- <u-col span="4">
									<view class="demo-layout bg-purple-light">风险部位</view>
								</u-col> -->
								<u-col span="12">
									<view class="title">风险部位</view>
									<view class="demo-layout ">
										<u-read-more :toggle="true" showHeight="50" textIndent="0em" closeText="展开"
											:shadowStyle="shadowStyle">
											<rich-text :nodes="item.hiddenBw"></rich-text>
										</u-read-more>
									</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px;">
								<!-- <u-col span="4">
									<view class="demo-layout bg-purple-light">危险源</view>
								</u-col> -->
								<u-col span="12">
									<view class="demo-layout ">
										<view class="title">危险源</view>
										<u-read-more :toggle="true" showHeight="50" textIndent="0em" closeText="展开"
											:shadowStyle="shadowStyle">
											<rich-text :nodes="item.hiddenYuan"></rich-text>
										</u-read-more>
									</view>

								</u-col>
							</u-row>

							<u-row customStyle="margin-bottom: 10px;">
								<!-- <u-col span="4">
									<view class="demo-layout bg-purple-light">控制措施</view>
								</u-col> -->
								<u-col span="12">
									<view class="demo-layout ">
										<view class="title">控制措施</view>
										<u-read-more :toggle="true" showHeight="50" textIndent="0em" closeText="展开"
											:shadowStyle="shadowStyle">
											<rich-text :nodes="item.hiddenCs"></rich-text>
										</u-read-more>
									</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px;" v-if="item.hiddenTestFile">
								<!-- <u-col span="4">
									<view class="demo-layout bg-purple-light">示例图片</view>
								</u-col> -->
								<u-col span="8">
									<view class="title">示例图片</view>
									<view class="demo-layout " @click="imgpre(item.hiddenTestFile)">
										<image style="width: 80px;height: 80px;"
											:src="'http://192.168.1.143:8089/common/file/'+item.hiddenTestFile+'/preview'"
											mode="aspectFill" class="photo-img"></image>
									</view>
								</u-col>
							</u-row>
						</view>
						<view style="width: 32%;">
							<u-row customStyle="margin-bottom: 20px" justify="flex-end">
								<!-- <u-col span="7"> -->
								<view class="demo-layout bg-purple-light"
									style="font-weight: bolder;font-size: 17px;color: #18AAFF;"
									v-if="item.hiddenStatus==1">
									进行中
								</view>
								<view class="demo-layout bg-purple-light"
									style="font-weight: bolder;font-size: 17px;color: #FF6549;"
									v-if="item.hiddenStatus==3">
									未完成
								</view>
								<view class="demo-layout bg-purple-light" v-if="item.hiddenStatus==2"
									style="font-weight: bolder;font-size: 17px;color: #87D166;">
									已完成
								</view>
								<!-- </u-col> -->
							</u-row>
							<u-row customStyle="margin-bottom: 20px">
								<!-- <u-col span="8"> -->
								<u-radio-group v-model="item.hiddenNormal" placement="column"
									v-if="item.hiddenStatus==1" :disabled="storage_data=='create'">
									<u-radio :label="0" name="正常" :customStyle="{marginBottom: '20px'}"
										size="25">正常</u-radio>
									<u-radio :label="1" name="异常" size="25">异常</u-radio>
								</u-radio-group>
								<view class="demo-layout bg-purple-light"
									v-if="item.hiddenStatus!=1&&item.hiddenNormal">
									<u-tag :text="item.hiddenNormal?item.hiddenNormal:''" plain size="mini"
										:type="item.hiddenNormal=='正常'?'success':'error'"></u-tag>
								</view>
								<!-- </u-col> -->
							</u-row>
							<u-row customStyle="margin-bottom: 20px">
								<u-col span="12">
									<!-- <view class="demo-layout bg-purple-light">{{item.hiddenCs.hiddenRemak}}</view> -->
									<view class="title">备注</view>
									<u--textarea v-model="item.hiddenRemak" placeholder="请输入备注信息" :height="75"
										v-if="item.hiddenStatus==1" :disabled="storage_data=='create'" />
									<u-read-more :toggle="true" showHeight="50" textIndent="0em" closeText="展开"
										:shadowStyle="shadowStyle" v-else>
										<rich-text :nodes="item.hiddenRemak"></rich-text>
									</u-read-more>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 20px">
								<u-col span="12">
									<view class="title">检查图片</view>
									<view class="photo-container" v-if="item.hiddenFile"
										@click="imgpre(item.hiddenFile)">

										<image
											:src="'http://192.168.1.143:8089/common/file/'+item.hiddenFile+'/preview'"
											mode="aspectFill" class="photo-img"></image>

										<!-- <view  class="photo-placeholder" @click="takePhoto(item,index)">点击拍照
										</view> -->
									</view>
									<view class="photo-container" v-if="item.hiddenStatus==1&&storage_data!='create'"
										@click="takePhoto(item,index)">
										<!-- <image v-if="item.hiddenFile"
											:src="'http://192.168.1.143:8089/common/file/'+item.hiddenFile+'/preview'"
											mode="aspectFill" class="photo-img"></image> -->
										<view class="photo-placeholder"><u-icon name="camera" size="50"></u-icon></view>
									</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px" v-if="item.hiddenSig">
								<u-col span="12">
									<view class="title">手写签名</view>
									<view class="photo-container" @click="imgpre(item.hiddenSig)">
										<image
											:src="'http://192.168.1.143:8089/common/file/'+item.hiddenSig+'/previewOriginal'"
											mode="aspectFill" class="photo-img"></image>

									</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px;" v-if="item.hiddenStatus==2">
								<u-col span="12">
									<view class="demo-layout ">
										<view class="title">排查人</view>
										<u-read-more :toggle="true" showHeight="50" textIndent="0em" closeText="展开"
											:shadowStyle="shadowStyle">
											<rich-text :nodes="item.hiddenPcName"></rich-text>
										</u-read-more>
									</view>

								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px;" v-if="item.hiddenStatus==2">
								<u-col span="12">
									<view class="demo-layout ">
										<view class="title">完成时间</view>
										<u-read-more :toggle="true" showHeight="50" textIndent="0em" closeText="展开"
											:shadowStyle="shadowStyle">
											<rich-text :nodes="item.hiddenTime"></rich-text>
										</u-read-more>
									</view>

								</u-col>
							</u-row>
						</view>
					</view>
				</uni-card>
				<!-- </u-checkbox-group> -->
				<!-- </u-cell> -->
			</u-list-item>
			<u-empty mode="list" marginTop="200" v-if="InvestigationList.length==0">
			</u-empty>
		</u-list>
		<!-- 弹出层 -->
		<u-action-sheet :actions="listsheet" :show="showsheet" cancelText="取消" @close="showsheet=false"
			@select="select"></u-action-sheet>
		<!-- 分页器 -->
		<!-- <l-pagination v-model="queryParams.pageNum" :total="total" :page-size="queryParams.pageSize" :pager-count="3"
			@change="changes" v-if="total>0" /> -->
		<!-- 手写签名弹窗 -->
		<view>
			<uni-popup ref="share" type="bottom" safeArea backgroundColor="#fff" style="width: 100% ;height: 100%;">
				<view style="width: 750rpx ;height: 750rpx;background-color: #fff;">
					<l-signature disableScroll v-if="share_open" ref="signatureRef" :beforeDelay="100"
						:penSize="penSize" :openSmooth="openSmooth"></l-signature>
				</view>
				<view class="sxqm_cz">
					<view class="sxqm_cz_bt" @click="onClick('close')">关闭</view>
					<view class="sxqm_cz_bt" @click="onClick('clear')">清空</view>
					<view class="sxqm_cz_bt" @click="onClick('undo')">撤消</view>
					<view class="sxqm_cz_bt" @click="onClick('save')">保存</view>
				</view>
			</uni-popup>
		</view>
		<u-modal :show="showSubmit" title="提示" :content='content' @confirm="confirmSubmit" @cancel="cancelSubmit"
			showCancelButton="true"></u-modal>
		<!-- 加载 -->
		<u-loading-page :loading="showLoading"></u-loading-page>
		<u-back-top :scroll-top="innerScrollTop" top="100" @click="changes"></u-back-top>
		<tabBar selectedIndex=2 v-if="storage_data=='create'"></tabBar>
		<tabBar selectedIndex=0 v-else></tabBar>
	</view>
</template>

<script>
	import {
		listInvestigation,
		uploadBase64,
		submitInvestigation,
		saveInvestigation,getBwType
	} from '@/api/system/pcqd.js'
	export default {
		data() {
			return {
				show: false,
				title: '标题',
				checkboxValue1: [],
				showDetle: false,
				list: ['进行中', '已完成'],
				current: 0,
				InvestigationList: [],
				total: 0,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 999,
					hiddenName: null,
					hiddenCode: null,
					hiddenStatus: null,
					hiddenBw: '',
					hiddenYuan: null,
					hiddenLocation: null,
					hiddenCs: null,
					hiddenNormal: null,
					hiddenRemak: null,
					hiddenPcName: null,
					hiddenPcNumber: null,
					hiddenUserName: null,
					createTime: null,
				},
				listsheet: [{
						name: '手写签名',
						fontSize: '16'
					},
					{
						name: '复用手写签名',
						fontSize: '16'
					}
				],
				showsheet: false,
				share_open: false,
				penSize: 6, //线宽
				openSmooth: true, //压感
				signature: '',
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				showLoading: false,
				scrollTop: 0,
				innerScrollTop: 0,
				storage_data: '',
				showSubmit: false,
				content: '',
				list1: [],
				currenttab:0
			}
		},
		created() {
			let jump_info = uni.getStorageSync('jump_info') ? uni.getStorageSync('jump_info') : {};
			if (jump_info.hiddenProject == 2) {
				this.queryParams.hiddenStatus = 3
				this.list = ['未完成', '已完成']
				this.getBwType(jump_info.hiddenCode,this.queryParams.hiddenStatus)
			} else {
				this.queryParams.hiddenStatus = 1
				this.list = ['进行中', '已完成']
				this.getBwType(jump_info.hiddenCode,this.queryParams.hiddenStatus)
			}
			console.log('cereat')
			this.storage_data = uni.getStorageSync('storage_data').user_roles[0];
			this.getList()
			
		},
		onReady() {
			uni.hideTabBar() //隐藏导航栏方法
		},
		// onShow() {
		// 	this.getList()
		// },
		onPullDownRefresh() {
			console.log('refresh');
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			click(item) {
				console.log('item', item);
				
				if(item.name=='全部'){
					this.queryParams.hiddenBw=''
				}else{
					this.queryParams.hiddenBw=item.name
				}
				this.getList()
			},
			changes(e) {
				// console.log('e', e)
				// this.queryParams.pageNum = e
				// this.getList()
				this.scrollTop = this.innerScrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				})
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300 // 滚动动画时长，单位ms
				})

			},
			onscroll(e) {
				// console.log('onscroll:', e);
				this.innerScrollTop = e
			},
			detele() {
				console.log('删除')
			},
			imgpre(item) {
				let img = 'http://192.168.1.143:8089/common/file/' + item + '/previewOriginal'
				// let img="https://bzh.jyssp.cn:8686/system/picture/CheckPicture?fileKey=2rL4A2MepA5gt2cL03Yv"
				console.log('img', img)
				let a = [];
				a[0] = img;
				uni.previewImage({
					urls: a,
				})
			},
			select(index) {
				console.log(index)
				if (index.name == '手写签名') {
					this.$refs.share.open();
					setTimeout(() => {
						this.share_open = true
					}, 100);
				} else {
					this.signature = this.$store.state.user.userSig
					this.submit()
				}
			},
			//绘制操作
			onClick(type) {
				let that = this;

				if (type == 'close') {
					// 关闭
					this.$refs.signatureRef.clear(); //先清空画布
					this.share_open = false;
					this.$refs.share.close(); //再关闭面板
					return
				};
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				};
				if (type == 'save') {
					// 保存
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							console.log('res', res)
							// 是否为空画板 无签名
							if (res.isEmpty) {
								uni.showToast({
									title: '您尚未进行签名，请您签名后再次保存！',
									icon: 'none'
								})
								return
							}
							uploadBase64({
								base64: res.tempFilePath,
								bizType: 'sig'
							}).then(res => {
								console.log('res', res)
								that.signature = res.data.id
								that.share_open = false;
								that.$refs.share.close(); //再关闭面板
								that.submit()
							})
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]();
			},
			// 拍照功能
			takePhoto(item, index) {
				console.log('item', item)
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						// 这里可以添加时间水印逻辑
						that.InvestigationList[index].hiddenFile = res.tempFilePaths[0];
						console.log('that.InvestigationList[index]', that.InvestigationList[index])
						uni.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0], //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: res => { //成功的回调
								let base64 = 'data:image/jpeg;base64,' + res
									.data //不加上这串字符，在页面无法显示的哦
								// this.imgBase64URL=base64
								console.log('base64', base64)
								uploadBase64({
									base64,
									bizType: 'img'
								}).then(res => {
									console.log('res', res)
									that.InvestigationList[index].hiddenFile = res.data.id
								})
							},
							fail: (e) => {
								console.log("图片转换失败");
							}
						})
					}
				});
			},
			getList() {
				let that = this
				that.showLoading = true
				let jump_info = uni.getStorageSync('jump_info') ? uni.getStorageSync('jump_info') : {};
				if (jump_info.hiddenProject == 2) {

					that.list = ['未完成', '已完成']
				} else {
					that.list = ['进行中', '已完成']
				}
				listInvestigation(jump_info.hiddenName, jump_info.hiddenStartTime, jump_info.hiddenEndTime, jump_info
					.hiddenUserName, that.queryParams.hiddenStatus, jump_info.createTime,that.queryParams.hiddenBw).then(res => {
					// setTimeout(() => {
					that.showLoading = false
					// }, 1000)
					that.InvestigationList = res.rows.map(item => {
						if (item.hiddenNormal == 0) {
							item.hiddenNormal = '正常'
						}
						if (item.hiddenNormal == 1) {
							item.hiddenNormal = '异常'
						}
						return item
					})
					
					
					that.total = res.total
					console.log('that.total', that.total)
					
				})
			},
			getBwType(hiddenCode,code){
				// let jump_info = uni.getStorageSync('jump_info') ? uni.getStorageSync('jump_info') : {};
				getBwType(hiddenCode,code).then(res=>{
					console.log('getBwType',res)
					if(res.data.length>0){
						this.list1=res.data.map(item=>{
							return {name:item}
						})
						this.list1.unshift({name:'全部'})
					}else{
						this.list1=[]
					}
					console.log('this.list1', this.list1)
				})
			},
			sectionChange(index) {
				console.log('index', index)
				let jump_info = uni.getStorageSync('jump_info') ? uni.getStorageSync('jump_info') : {};
				this.currenttab=0
				if (jump_info.hiddenProject == 2) {
					if (index == 0) {
						this.current = index;
						this.queryParams.hiddenStatus = 3
						console.log('indexthis.queryParams.hiddenStatus0', this.queryParams.hiddenStatus)
						this.getList()
						this.getBwType(jump_info.hiddenCode,this.queryParams.hiddenStatus)
					} else {
						this.current = index;
						this.queryParams.hiddenStatus = 2
						console.log('indexthis.queryParams.hiddenStatus1', this.queryParams.hiddenStatus)
						this.getList()
						this.getBwType(jump_info.hiddenCode,this.queryParams.hiddenStatus)
					}
				} else {
					if (index == 0) {
						this.current = index;
						this.queryParams.hiddenStatus = 1
						this.getList()
						this.getBwType(jump_info.hiddenCode,this.queryParams.hiddenStatus)
					} else {
						this.current = index;
						this.queryParams.hiddenStatus = 2
						this.getList()
						this.getBwType(jump_info.hiddenCode,this.queryParams.hiddenStatus)
					}
				}




			},
			checkboxChange(n) {
				console.log('change', n);
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			handleAdd() {
				// this.show = true;
				// this.title = '新增'
				// this.showsheet=true
				let show = this.InvestigationList.some(item => item.hiddenNormal != null) && this.InvestigationList.some(
					item => item.hiddenStatus != 2)
				let length = this.InvestigationList.filter(v => v.hiddenNormal != null).length;
				console.log('length', length)
				console.log('show', show);
				if (show) {

					this.showSubmit = true
					this.content = '已做完' + length + '条任务，是否提交?'

				} else {
					uni.showToast({
						title: '请完成任务后提交',
						icon: 'none'
					});
				}


			},
			confirmSubmit() {
				console.log('this.$store.state.user.userSig', this.$store.state.user.userSig);
				this.showSubmit = false
				this.content = ''
				if (this.$store.state.user.userSig) {
					this.showsheet = true
				} else {
					this.$refs.share.open();
					setTimeout(() => {
						this.share_open = true
					}, 100);
				}
			},
			cancelSubmit() {
				this.showSubmit = false
				this.content = ''
			},
			submit() {
				let arr = []
				this.InvestigationList.forEach(item => {
					if (item.hiddenNormal != null) {
						item.hiddenSig = this.signature
						if (item.hiddenNormal == '正常') {
							item.hiddenNormal = 0
						}
						if (item.hiddenNormal == '异常') {
							item.hiddenNormal = 1
						}
						arr.push(item)
					}
				})
				console.log('提交', arr)
				submitInvestigation(arr).then(res => {
					console.log('提交成功', res)
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					this.getList()
				})
			},
			handleUpdate() {
				let arr = []
				let show = this.InvestigationList.some(item => item.hiddenNormal != null) && this.InvestigationList.some(
					item => item.hiddenStatus != 2)
				if (show) {
					this.InvestigationList.forEach(item => {
						if (item.hiddenNormal != null) {
							if (item.hiddenNormal == '正常') {
								item.hiddenNormal = 0
							}
							if (item.hiddenNormal == '异常') {
								item.hiddenNormal = 1
							}
							arr.push(item)
						}
					})
					console.log('保存', arr)
				} else {
					uni.showToast({
						title: '无可保存项',
						icon: 'none'
					});
				}


				saveInvestigation(arr).then(res => {
					uni.showToast({
						title: '保存成功',
						duration: 2000
					});
					console.log('保存成功', res)
					this.getList()
				})
			},
			cancel() {
				this.show = false;
				console.log('点击取消')
			}
		},
	}
</script>

<style scoped>
	.contentButton {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1px dashed grey;
		/* margin-top: 20rpx; */
	}

	.custom-style {
		width: 200rpx;
		margin: 0 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	/* 	.title {
		font-size: 36rpx;
		color: #8f8f94;
	} */

	/* 新增样式 */
	.photo-container {
		width: 100%;
		height: 200rpx;
		border: 1px dashed #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.photo-img {
		width: 100%;
		height: 100%;
	}

	.photo-placeholder {
		color: #999;
	}

	.signature-container {
		padding: 20rpx;
	}

	.signature-tip {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.signature-canvas {
		width: 100%;
		height: 300rpx;
		border: 1px solid #ccc;
	}

	.signature-btns {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}

	.u-modal__content {
		justify-content: flex-start;
	}

	.subsection-wrapper ::v-deep .u-subsection {
		height: 40px !important;
	}
	.subsection-wrapper{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}
	.subsection-wrapper ::v-deep .u-subsection__item {
		height: 40px !important;
		line-height: 40px !important;
		font-size: 14px !important;
	}

	.u-radio__icon-wrap {
		margin-right: 0px;
	}


	.ulist ::v-deep .uni-card .uni-card__content {
		/* margin: 10px !important; */
		padding: 10px 0 !important;
	}

	.title {
		font-weight: bolder;
		font-size: 16px;
	}
</style>